<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="coinfaces">

        <title>Vue 数据响应的局限</title>

    <link rel="stylesheet" href="../theme/css/style.css">
    <link rel="stylesheet" href="../theme/css/pygments.css">



</head>

<body>
    <div class="content">
<h1>Vue 数据响应的局限</h1>    <p>
        under
            <a href="../tags/javascript/">JavaScript</a>
            <a href="../tags/vue/">Vue</a>
    </p>
    <p>
        in <a href="../categories/uncategorized/">Uncategorized</a>
    </p>
    <p>Published: 2019-04-03</p>


    <!-- wp:paragraph -->

<p>由于 Object.defineProperty() 的局限，Vue 不支持下列操作的数据响应：</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->

<ol>
<li>vm.items[indexOfItem] = newValue</li>
<li>vm.items.length = 2</li>
<li>添加或删除对象属性</li>
</ol>
<!-- /wp:list -->

<!-- wp:paragraph -->

<p>1意味着直接给数组成员赋值，Vue
不会知道数组发生了变化。一个简单的测试方法是在 Vue
调试插件中点开一个数组，修改其中一个元素的值，用户界面不会对修改作出响应，如果修改整个数组的值，用户界面就会发生变化。这有2种解决方法：</p>
<!-- /wp:paragraph -->

<!-- wp:code -->

<div class="highlight"><pre><span></span><code><span class="err">Vue.set(vm.items, indexOfItem, newValue)</span>
</code></pre></div>


<!-- /wp:code -->

<!-- wp:paragraph -->

<p>或者：</p>
<!-- /wp:paragraph -->

<!-- wp:code -->

<div class="highlight"><pre><span></span><code><span class="err">vm.items.splice(indexOfItem, 1, newValue)</span>
</code></pre></div>


<!-- /wp:code -->

<!-- wp:paragraph -->

<p>2意味着通过修改数组的 length 属性减小数组长度，Vue
也不会知道数组发生了变化，可以用 Array.prototype.splice 来完成这个操作：</p>
<!-- /wp:paragraph -->

<!-- wp:code -->

<div class="highlight"><pre><span></span><code><span class="err">vm.items.splice(newLength)</span>
</code></pre></div>


<!-- /wp:code -->

<!-- wp:paragraph -->

<p>对于3，可以使用 Vue.set 或 Vue.delete：</p>
<!-- /wp:paragraph -->

<!-- wp:code -->

<div class="highlight"><pre><span></span><code><span class="n">Vue</span><span class="p">.</span><span class="k">set</span><span class="p">(</span><span class="n">vm</span><span class="p">.</span><span class="n">someObject</span><span class="p">,</span> <span class="s1">&#39;b&#39;</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span>

<span class="n">Vue</span><span class="p">.</span><span class="k">delete</span><span class="p">(</span><span class="n">vm</span><span class="p">.</span><span class="n">someObject</span><span class="p">,</span> <span class="s1">&#39;b&#39;</span><span class="p">)</span>
</code></pre></div>


<!-- /wp:code -->

<!-- wp:paragraph -->

<p>参考资料</p>
<!-- /wp:paragraph -->

<!-- wp:list -->

<ul>
<li><a href="https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating">Vue
    的常见错误用法</a></li>
<li><a href="https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats">Vue
    对象数据动态响应的局限1</a></li>
<li><a href="https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats">Vue
    对象数据动态响应的局限2</a></li>
<li><a href="https://vuejs.org/v2/guide/list.html#Caveats">Vue
    数组数据动态响应的局限</a></li>
</ul>
<!-- /wp:list -->
    </div>
<nav class="nav sidebar">
    <div class="siteinfo">
        <div class="sitename"><a href="..">coinfaces</a></div>
        <div class="tagline">Another Side of Life</div>
    </div>

        <a href="../categories/">categories</a>
        <a href="..">&larr; Home</a>
</nav><footer class="footer">
    <span>
        &copy; jpli &middot;
        under <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</a>
    </span>
    |
    <span>
        Powered by:
        <a href="http://blog.getpelican.com/">Pelican</a>
    </span>
</footer></body>
</html>